import {createStyles, Theme, withStyles} from '@material-ui/core/styles';
import {WithStyles} from "@material-ui/core/styles/withStyles";
import * as React from "react";


const styles = (theme: Theme) => createStyles({
    root: {
        width: "30vw",
        height: "470px",
        margin:0,
        padding:0
    },
    first:{
        width:"25vw",
        height:"400px",
        textAlign:"center",
        margin:"auto"
    },
    spanStyle:{
        // width:"15vw",
        // height:"100px",
        marginLeft:"5vw",
        fontSize:"10px",
        textAlign:"start",
        // border:"1px red solid"
    }
});

interface Iprops extends WithStyles<typeof styles> {
}

class RightContent extends React.Component<Iprops> {
    public render() {
        const {classes} = this.props;
        return (
            <div className={classes.root}>
                <div className={classes.first}>
                    <br/><br/><br/><br/><br/><span style={{margin:"auto"}}>扫描二维码，关注公众号</span><br/><br/><br/>
                    <img src={require("../../images/wechat.png")} style={{width: "150px", height: "150px",margin:"auto"}} alt=""/><br/><br/><br/>
                     <div className={classes.spanStyle}>
                         <span>1.打开微信，打开"扫一扫"</span><br/>
                         <span>2.对准上图二维码，扫出结果后点击"关注该公众号"</span><br/>
                         <span>3.点击"进入公众号"，开始使用</span>
                     </div>



                </div>
            </div>);
    }
}

export default withStyles(styles)(RightContent);